<template>
  <!-- 使用自定义插槽 来显示文件因为会循环和字节点响应的文件-->
  <el-row type="flex" style="width: 100%">
    <!-- 头部左边 -->
    <el-col>
      <div class="grid-content bg-purple-dark">{{ treeNode.name }}</div>
    </el-col>
    <!-- 右边 -->
    <el-col>
      <!-- 右边的文字 -->
      <el-row type="flex" justify="end">
        <el-col :span="5">{{ treeNode.manager }}</el-col>
        <!-- 右边的下拉菜单 -->
        <el-col :span="5">
          <el-dropdown @command="operateDepts">
            <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add" :disabled="!checkPermission('add-bumen')">添加部门</el-dropdown-item>
              <el-dropdown-item command="edit" v-if="!isRoot" @click="operateDepts" :disabled="!checkPermission('role-bumen')">编辑部门</el-dropdown-item
              >
              <el-dropdown-item command="del" v-if="!isRoot" :disabled="!checkPermission('deleet-bumen')"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 引入删除树状图部门的方法的接口
import {delDepartments} from "@/api/departments"
export default {
  // 接收传过来所需要的值
  props: {
    treeNode: {
      required: true,
      type: Object,
    },
    isRoot: {
      //增加isRoot，控制是否为头部，是否显示编辑部门和删除部门
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 下拉菜单的点击事件接收点击事件得传过来的值
    operateDepts(text) {
      if (text === "add") {
        // 添加部门操作
        this.$emit("addDepts",this.treeNode)
      } else if (text === "edit") {
        // 编辑部门操作
        this.$emit("editDepts",this.treeNode)
      } else {
        // 删除部门操作
        // 弹窗提示
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            // 调用接口方法
            await delDepartments(this.treeNode.id);
            // 向父文件传值
            this.$emit("delDepts");
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch((eer) => {
            console.log(eer);
            this.$message({
              type: "info",
              message: "删除已取消",
            });
          });
      }
    },
  },
};
</script>

<style>
</style>